<template>
	<view class="home">
		<!-- 头部搜索条 start -->
		<view class="header-search">
			<view class="home-search-form">
				<button aria-label="搜索" data-test="input_button" type="submit">
					<image src="@/static/images/icon/search.png" mode=""></image>
				</button>
				<input type="search" value="" placeholder="搜索"/>
			</view>
		</view>
		<!-- 头部搜索条 end -->
		<!-- 头部分类bar start -->
		<view class="header-cate-bar">
			<my-tabs @change="tapChange" labelKey="category_name" imageKey="" :modelData="topCategory" :initIndex="initIndex"></my-tabs>
		</view>
		<!-- 头部分类bar end -->
		<!-- 内容区域商品列表 start -->
		<view class="content-goods-list">
			<!-- 轮播图 start -->
			<view class="goods-swpper">
				<bw-swiper :swiperList="banerList" @clickItem="handleGoodDetail" style="width:100%"></bw-swiper>
			</view>
			<!-- 轮播图 end -->
			
			<!-- cate 1 start -->
			<view class="goods-cate-first">
				<uni-grid :column="3" :show-border="false"  :square="false">
					<uni-grid-item v-for="(item,index) in navList" :key="index">
						<view class="cate-first-box" @click="invokeSmart">
							<view class="goods-cate-first-img">
								<image src="../../static/logo.png" mode="aspectFit"></image>
							</view>
							<view class="goods-cate-first-name">
								<text>{{item.title}}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- cate 1 end -->
			
			<!-- cate 2 start -->
			<!-- <view class="goods-cate-second" v-if="newGoodsList.length > 0">
				<view class="goods-cate-second-line">
					<text>新进单品</text>
				</view>
				<uni-grid :column="2" :show-border="false"  :square="false">
					<uni-grid-item v-for="(item,index) in newGoodsList" :key="index">
						<view class="cate-second-box">
							<view class="goods-cate-second-img">
								<image src="../../static/logo.png" mode="widthFix"></image>
							</view>
							<view class="goods-cate-second-name">
								<view class="title">
									<text>REASD</text>
								</view>
								<view class="name">
									<text>复古风</text>
								</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view> -->
			<!-- cate 2 end -->
			
			<!-- cate 3 start -->
			<!-- <view class="goods-cate-third-line">
				<text>热门分类</text>
			</view>
			<view class="goods-cate-third" v-for="(ctl,index_1) in hotCategory" :key="index_1">
				<view class="goods-cate-third-left">
					<image src="../../static/logo.png" mode="aspectFit"></image>
				</view>
				<view class="goods-cate-third-right">
					<view class="goods-cate-third-right-title">
						<text>{{ctl.board_title}}</text>
					</view>
					<view class="goods-cate-third-right-grid">
						<uni-grid :column="3" :show-border="false"  :square="false">
							<uni-grid-item v-for="(item,index) in ctl.list" :key="index" v-if="index <3">
								<view class="cate-third-box">
									<image :src="item.cover" mode="aspectFit"></image>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
			</view> -->
			<!-- cate 3 end -->
			
			<view class="goods-list">
				<view class="goods-cate-goods-line line-list">
					<view class="list-left">
						<text>精选好物</text>
					</view>
					<view class="list-right">
						<text @click="invokeSmart">更多></text>
					</view>
				</view>
				<!-- @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" @scroll="scroll" @touchstart="touchstart" -->
				<view class="purchase-body">
					<uni-grid :column="2" :show-border="false"  :square="false">
						<uni-grid-item v-for="(item,index) in categoryGoodsList" :key="index">
							<view class="goods-item" @click="handleGoodDetail(item)">
								<view class="">
									<image src="../../static/images/16050187_30449811_480.jpg" mode="aspectFit"></image>
								</view>
								<view class="goods-brand">
									{{item.addoption}}
								</view>
								<view class="goods-name">
									{{item.short_goods_name}}
								</view>
								<view class="goods-price">
									{{item.goods_sale_price}}
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			
			<!-- good-list start -->
			<view class="goods-list">
				<view class="goods-cate-goods-line line-list">
					<view class="list-left">
						<text>新进单品</text>
					</view>
					<view class="list-right">
						<text @click="invokeSmart">更多></text>
					</view>
				</view>
				<!-- @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" @scroll="scroll" @touchstart="touchstart" -->
				<view class="purchase-body">
					<uni-grid :column="2" :show-border="false"  :square="false">
						<uni-grid-item v-for="(item,index) in newGoodsList" :key="index">
							<view class="goods-item" @click="handleGoodDetail(item)">
								<view class="">
									<image src="../../static/images/16050187_30449811_480.jpg" mode="aspectFit"></image>
								</view>
								<view class="goods-brand">
									{{item.addoption}}
								</view>
								<view class="goods-name">
									{{item.short_goods_name}}
								</view>
								<view class="goods-price">
									{{item.goods_sale_price}}
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			<!-- good-list end -->
		</view>
		<!-- 内容区域商品列表 end -->
	</view>
</template>

<script>
	import {getSupGoodsList,getNewGoodsList} from '@/api/goods.js'
	import {getAreaNumList} from '@/api/area.js'
	import {getCountyList} from '@/api/lifeall.js'
	import {getHomeCategoryList} from '@/api/category.js'
	import {getWapHomeBanner,getSupCategory} from '@/api/home.js'
	import {globalMixin} from '@/util/globalMixin.js'
	import myTabs from '@/components/myTabs/myTabs.vue'
	import bwSwiper from '@/components/bw-swiper/bw-swiper.vue'
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import jsrsasign from 'jsrsasign'
	import jsrsasignUtil from 'jsrsasign-util'
	export default {
		mixins:[globalMixin],
		components: {
			myTabs,
			bwSwiper,
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				banerList: [],
				hotCategory: [], //热门分类
				topCategory: [] ,// 顶部分类
				navList: [],
				tabValue: {},
				initIndex: 0,
				categoryGoodsList: [],
				newGoodsList: []
			}
		},
		mounted() {
			this.initTopCategory();
			//this.refresh();
			this.initHomeBanner()
			//this.initCountyList();
			//this.initAreaList()
			this.initSupCategory();
			this.initNewGoodsList();
			
			// 公钥
		   let pk="-----BEGIN PUBLIC KEY-----\n" +
				"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQD3XSdz1MnzazBEN5KOfTx0IyVJ\n" +
				"Z5wb57isrCuHDhnYXwtmdhQalgII0fozeeFpMpAvlnmHC1kpW7XVGvZnLx3bWbCE\n" +
				"bf+pMSW4kmQuI+5cxRUJbCl7sdaODBrINgERHPICVC18AJLThEVMHyjuR6Jn4zQm\n" +
				"yYNbReSktY/BrFTvMQIDAQAB\n" +
				"-----END PUBLIC KEY-----";
			  // 私钥
			let priK = "-----BEGIN PRIVATE KEY-----\n" +
				"MIICeAIBADANBgkqhkiG9w0BAQEFAASCAmIwggJeAgEAAoGBAPddJ3PUyfNrMEQ3\n" +
				"ko59PHQjJUlnnBvnuKysK4cOGdhfC2Z2FBqWAgjR+jN54WkykC+WeYcLWSlbtdUa\n" +
				"9mcvHdtZsIRt/6kxJbiSZC4j7lzFFQlsKXux1o4MGsg2AREc8gJULXwAktOERUwf\n" +
				"KO5HomfjNCbJg1tF5KS1j8GsVO8xAgMBAAECgYEA6eG1JMrj63jEmStmMb1txG1a\n" +
				"mu4Q5z2QGgtr2HVXsIIlGEq6tWxyHf7TL4qkuz9onuYKn8n2Eqm44fZtVaBx+5ES\n" +
				"zRpIvlTvaxmVu0HZ1hYAzUw1XyRnXNMKpL5tT4GCjm8+QGPzlGxgXI1sNg8r9Jaw\n" +
				"9zRUYeA6LQR9RIMkHWUCQQD8QojjVoGjtiunoh/N8iplhUszZIavAEvmDIE+kVy+\n" +
				"pA7hvlukLw6JMc7cfTcnHyxDo9iHVIzrWlTuKRq9KWVLAkEA+wgJS2sgtldnCVn6\n" +
				"tJKFVwsHrWhMIU29msPPbNuWUD23BcKE/vehIyFu1ahNA/TiM40PEnzprQ5JfPxU\n" +
				"16S78wJANTfMLTnYy7Lo7sqTLx2BuD0wqjzw9QZ4/KVytsJv8IAn65P/PVn4FRV+\n" +
				"8KEx+3zmF7b/PT2nJRe/hycAzxtmlQJBAMrFwQxEqpXfoAEzx4lY2ZBn/nmaR/SW\n" +
				"4VNEXCbocVC7qT1j1R5HVMgV13uKiTtq8dUGWmhqsi7x3XayNK5ECPUCQQDZaAN6\n" +
				"tvIHApz9OLsXSw0jZirQ6KEYdharXbIVDy1W1sVE3lzLbqLdFp1bxAHQIvsYS5PM\n" +
				"A9veSJh372RLJKkj\n" +
				"-----END PRIVATE KEY-----";
			 
			// 原文
			var signStart = (new Date()).valueOf();
			var src = "好厉害";
			console.log(src)
			let sig = new jsrsasign.Signature({alg: 'SHA256withRSA',"prov": "cryptojs/jsrsa","prvkeypem": priK});
			//sig.init(priK);
			sig.updateString(src);
			var sigVal = sig.sign();
			console.log(sigVal)
			var signEnd = (new Date()).valueOf();
			console.log("start:"+signStart +"  end:"+signEnd)
			var use = (signEnd-signStart)
			console.log("use:"+use)
			
			var dec = new jsrsasign.Signature({alg: 'SHA256withRSA',"prov": "cryptojs/jsrsa","prvkeypem": pk});
			//dec.init(pk);
			dec.updateString(src);
			let result = dec.verify(sigVal);
			console.log(result)
		},
		methods: {
			initNewGoodsList() {
				let result = getNewGoodsList({supid:this.getSupId()})
				result.then(res=>{
					console.log(res)
					if(res.code== 0) {
						this.newGoodsList = res.data || []
					}
				})
				
			},
			initSupCategory() {
				let result = getSupCategory({supid:this.getSupId(),type_id:3})
				result.then(res=>{
					console.log(res)
					if(res.code== 0) {
						let data = res.data
						if(data) {
							this.navList = data.nav_head
						}
					}
				})
			},
			initAreaList() {
				let result = getAreaNumList()
				result.then(res=>{
					if(res.code== 0) {
						
					}
				})
			},
			initCountyList() {
				console.log(this.getSupId())
				let result = getCountyList()
				result.then(res=>{
					console.log(res)
				})
			},
			initHomeBanner() {
				let result = getWapHomeBanner({supid:this.getSupId(),type_id:2})
				result.then(res=>{
					if(res.code == 0) {
						this.banerList = res.data
					}
				})
			},
			invokeSmart() {
				uni.navigateTo({
					url: '/pages/smart/smart'
				})
			},
			initTopCategory() {
				let result = getHomeCategoryList({supid:this.getSupId()})
				result.then(res=>{
					if(res.code == 0) {
						this.topCategory = res.data
						if(this.topCategory && this.topCategory.length >0) {
							this.tabValue = this.topCategory[0]
							this.getCategoryGoodsList()
						}
					}
				})
			},
			
			getCategoryGoodsList() {
				let result = getSupGoodsList({supid:this.getSupId(),catid:this.tabValue.uid,num:10})
				result.then(res=>{
					if(res.code == 0) {
						var db = res.data || [];
						this.categoryGoodsList = db
					}
				})
			},
			
			/**
			 * @name 改变tab
			 * @param val 索引
			 */
			tapChange(val,item){
				this.initIndex=val
				this.tabValue = item
				this.getCategoryGoodsList()
			},
			
			handleGoodDetail(item) {
				if(item) {
					uni.navigateTo({
						url:"/pages/smart/detail?id="+item.uid
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		background-color:#FFFFFF;
	}
	.line-list {
		display: flex;
		justify-content: space-between;
		.list-right {
			font-weight: 500;
			color: #949494;
			font-size: 26rpx;
		}
	}
	.header-search {
		margin: 10rpx 20rpx;
		.home-search-form {
			width: 100%;
			height: 84rpx;
			display: flex;
			justify-content: space-between;
			border: 0.1rpx solid #727272;
			border-radius: 10rpx;
			background-color: #fff;
			input {
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				padding: 0 20rpx;
			}
			button {
				height: 84rpx;
				line-height: 84rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin: 0;
				padding: 0 0 0 20rpx;
				vertical-align: middle;
				border: 0;
				background: transparent;
				border-radius: 0;
				font-weight: 400;
				text-decoration: none;
				text-align: center;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: pointer;
				background-image: none;
				touch-action: manipulation;
				image {
					height: 40rpx;
					width: 40rpx;
				}
			}
			button:after {
				border: 0;
			}
		}
	}
	
	.header-cate-bar {
		padding: 20rpx 20rpx 30rpx 20rpx;
	}
	
	.content-goods-list {
		.goods-cate-first {
			padding: 40rpx 20rpx;
			image {
				max-width: 100%;
			}
			.cate-first-box {
				margin-bottom: 30rpx;
				text-align: center;
				.goods-cate-first-img {
					image {
						height: 200rpx;
					}
				}
				.goods-cate-first-name {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
		
		.goods-cate-second {
			.goods-cate-second-line {
				line-height: 120rpx;
				height: 120rpx;
				text-align: center;
				font-weight: 500;
			}
			uni-grid-item {
				&:nth-child(even) {
					.cate-second-box {
						padding-left: 10rpx;
					}
				}
				&:nth-child(odd) {
					.cate-second-box {
						padding-right: 10rpx;
					}
				}
				.cate-second-box {
					padding: 20rpx 20rpx;
					margin-bottom: 30rpx;
					text-align: center;
					.goods-cate-second-img {
						image {
							width: 100%;
						}
					}
					.goods-cate-second-name {
						margin-top: 20rpx;
						font-size: 28rpx;
						font-weight: 500;
						.title {
							font-weight: 600;
						}
					}
				}
			}
		}
		
		.goods-cate-third-line {
			line-height: 120rpx;
			height: 120rpx;
			padding: 0 20rpx;
			font-weight: 500;
		}
		.goods-cate-third {
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			.goods-cate-third-left {
				width: 33.33%;
				image {
					width: 100%;
				}
			}
			image {
				max-width: 100%;
			}
			.goods-cate-third-right {
				width: 66.66%;
				.goods-cate-third-right-title {
					display: flex;
					align-items: center;
					height: 50%;
					padding: 0 20rpx;
				}
				.goods-cate-third-right-grid {
					padding: 0 20rpx;
					height: 50%;
					.cate-third-box {
						height: 100%;
					}
				}
			}
		}
		
		.goods-list {
			padding: 0 20rpx;
			.goods-cate-goods-line {
				line-height: 120rpx;
				height: 120rpx;
				font-weight: 550;
			}
			uni-grid-item {
				&:nth-child(even) {
					.goods-item {
						padding-left: 10rpx;
					}
				}
				&:nth-child(odd) {
					.goods-item{
						padding-right: 10rpx;
					}
				}
				.goods-item {
					text-align: center;
					padding-bottom: 40rpx;
					.goods-brand {
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						margin-top: 20rpx;
						font-weight: 550;
					}
					.goods-name {
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						margin-top: 10rpx;
					}
					.goods-price {
						margin-top: 40rpx;
					}
					image {
						max-width: 100%;
					}
				}
			}
		}
	}
</style>
